import VideoPlayer from '@/components/VideoPlayer';
import { Card, Col, Row, Tabs } from 'antd';
import React, { useState } from 'react';

const topVideos = [
  {
    title: '天尽的尽头',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9130/260',
    tag: '22集全',
  },
  {
    title: '唐探1900',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9131/260',
    tag: '9.0',
  },
  {
    title: '哈哈哈哈哈 第5季',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9132/260',
    tag: '更新至18期',
  },
  {
    title: '宝宝巴士儿歌 3D版',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9133/260',
    tag: '更新至221集',
  },
];

const categories = [
  { key: 'recommend', label: '为你推荐' },
  { key: 'all', label: '全部' },
  { key: 'family', label: '家庭生活' },
  { key: 'action', label: '动作喜剧' },
  { key: 'city', label: '都市奇幻' },
  { key: 'love', label: '爱情喜剧' },
  { key: 'cartoon', label: '漫画改编' },
  { key: 'science', label: '科幻' },
  { key: 'hot', label: '热门综艺' },
  { key: 'original', label: '原创动画' },
];

const videoList = [
  {
    title: '重案六组第一部',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9134/260',
    tag: '',
  },
  {
    title: '蜡笔小新 第7季',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9135/260',
    tag: '',
  },
  {
    title: '早餐中国 第4季',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9136/260',
    tag: '',
  },
  {
    title: '斗破苍穹 第5季',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9137/260',
    tag: '独播',
  },
  {
    title: '快一秒的他',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9138/260',
    tag: 'VIP',
  },
  {
    title: '金牌调解',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9139/260',
    tag: '',
  },
  {
    title: '食行荒野',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9140/260',
    tag: '',
  },
  {
    title: '心理追凶第六季',
    cover: 'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200vd0h0g9141/260',
    tag: '',
  },
];

const HomePage: React.FC = () => {
  const [tab, setTab] = useState('recommend');

  return (
    <div style={{  background: 'transparent' }}>
      <VideoPlayer
        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        poster="https://your-cover.jpg"
        autoPlay={true}
        width="100%"
        height="100vh"
        showControls={false}
      />
      {/* 顶部推荐区 */}
      <Row gutter={24} style={{ marginBottom: 24 }}>
        {topVideos.map((v, i) => (
          <Col span={6} key={i}>
            <Card
              hoverable
              cover={
                <img
                  src={v.cover}
                  alt={v.title}
                  style={{ height: 160, objectFit: 'cover', borderRadius: 8 }}
                />
              }
              style={{ background: '#181818', color: '#fff', border: 'none', borderRadius: 12 }}
              bodyStyle={{ padding: 12 }}
            >
              <div style={{ fontWeight: 'bold', color: '#fff', fontSize: 16 }}>{v.title}</div>
              <div style={{ color: '#aaa', fontSize: 12 }}>{v.tag}</div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 分类Tab */}
      <Tabs
        activeKey={tab}
        onChange={setTab}
        style={{ marginBottom: 24 }}
        tabBarStyle={{ color: '#fff' }}
        items={categories.map((c) => ({ key: c.key, label: c.label }))}
      />

      {/* 视频卡片区 */}
      <Row gutter={[24, 24]}>
        {videoList.map((v, i) => (
          <Col span={6} key={i}>
            <Card
              hoverable
              cover={
                <img
                  src={v.cover}
                  alt={v.title}
                  style={{ height: 120, objectFit: 'cover', borderRadius: 8 }}
                />
              }
              style={{ background: '#181818', color: '#fff', border: 'none', borderRadius: 12 }}
              bodyStyle={{ padding: 12 }}
            >
              <div style={{ fontWeight: 'bold', color: '#fff', fontSize: 15 }}>{v.title}</div>
              <div style={{ color: '#aaa', fontSize: 12 }}>{v.tag}</div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default HomePage;
